<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">注册</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">姓名</label
              >
              <div class="col-sm-6">
                <input
                  v-model="username"
                  type="email"
                  class="form-control"
                  id="inputEmail3"
                  placeholder="姓名"
                />
              </div>
              <div
                v-show="!usernameList()"
                class="col-sm-4 form-control-static text-danger"
              >
                用户名必须是8-12位字符
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label"
                >密码</label
              >
              <div class="col-sm-6">
                <input
                  v-model="pwd"
                  type="password"
                  class="form-control"
                  id="inputPassword3"
                  placeholder="密码"
                />
              </div>
              <div
                v-show="!pwdnameList()"
                class="col-sm-4 form-control-static text-danger"
              >
                密码必须是8-12位字符
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                  <input
                    v-model="sex"
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="n"
                  />
                  男
                </label>
                            <label class="radio-inline">
                  <input
                    v-model="sex"
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="v"
                  />
                  女
                </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10" :class="isAgree?'text-success':'text-danger'">
                            <!--类名： text-success： 绿色  ； text-danger：红色 -->
                            <div class="checkbox" class="text-success">
                                <label>
                    <input v-model="isAgree" type="checkbox" />
                    是否同意条款
                  </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">城市</label>
                        <div class="col-sm-6">
                            <select v-model="city" class="form-control">
                  <option value="">--请选择城市--</option>
                  <option value="sz">深圳</option>
                  <option value="gd">广东</option>
                  <option value="sh">上海</option>
                </select>
                        </div>
                        <div v-show="!city" class="col-sm-4 text-danger form-control-static">
                            请选择城市
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <!-- 不能点击 加类名 disabled -->
                            <button type="submit" :class="canreg()?'':'disabled '" class="btn btn-success">
                  注册
                </button>
                            <button type="submit" :class="canreset()?'':'disabled '" class="btn btn-danger" @click="btncz">
                  重置
                </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            username: "",
            pwd: "",
            sex: "n",
            isAgree: false,
            city: "",
        },
        methods: {
            usernameList() {
                if (this.username.length >= 8 && this.username.length <= 12) {
                    return true;
                } else {
                    return false;
                }
            },
            pwdnameList() {
                if (this.pwd.length >= 8 && this.pwd.length <= 12) {
                    return true;
                } else {
                    return false;
                }
            },
            //注册
            canreg() {
                if (
                    this.usernameList &&
                    this.pwdnameList &&
                    this.isAgree &&
                    this.city != ""
                ) {
                    return true;
                } else {
                    return false;
                }
            },
            //重置
            canreset() {
                if (
                    this.username.length > 0 ||
                    this.pwd.length > 0 ||
                    this.isAgree ||
                    this.city != "" ||
                    this.sex == "v"
                ) {
                    return true;
                } else {
                    return false;
                }
            },
            btncz() {
                this.username = "";
                this.pwd = "";
                this.sex = "n";
                this.isAgree = false;
                this.city = "";
            },
        },
    });
</script>

</html>